<template>
	<view>
		<head-navbar :back="true" :bgColor="'#fff'">
			<view class="">支付状态</view>
		</head-navbar>
		<!-- <view class="image">
		<image src="../../static/img/icon_payScuess.png"></image>
		</view>
		<view class="text">支付成功</view>
		<view class="btns">
			<view class="btn" @click="toIndex">返回首页</view>
		</view> -->
		
		
		<view class="content">
			<view class="contentBox">
			<view class="box" v-show="status == 1">
				<image src="../../static/img/icon_payScuess.png"></image>
				<view class="tipText">支付成功</view>
				<view class="btns">
					<view class="btn1" @click="toIndex">返回首页</view>
				</view>
			</view>
			<view class="box" v-show="status == 2">
				<image src="../../static/img/icon_fail.png"></image>
				<view class="tipText">订单未成功，可再次查询</view>
				<view class="btns">
					<view class="btn2" @click="again">再试一次</view>
					<view class="btn1" @click="toIndex">返回首页</view>
				</view>
			</view>
			<view class="box" v-show="status == 0">
				<image class="images" src="../../static/img/icon_loading.png"></image>
				<view class="tipText">正在查询支付状态,请稍后...</view>
				<view class="jinmdutiao">
					<u-line-progress striped  active-color="#9d7b4d" :percent="mypercent*10" :show-percent="false"></u-line-progress>
				</view>
			</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/api/order/index'
	export default{
		data() {
			return {
				status:1,
				mypercent: 0,
				time: null,
				orderId: '',
			}
		},
		onLoad(option) {
			if(option.status == 0){
				this.status = option.status
				this.timOut()
			}
			this.orderId = uni.getStorageSync("payOrderId")
			console.log(this.orderId)
			// uni.removeStorageSync('payOrderId')
		},
		methods:{
			toIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			again() {
				this.mypercent = 0
				this.status = 0
				this.timOut()
			},
			getStatus() {
				api.getOrderByOrderId({
					payNo: this.orderId
				}).then(res => {
					// console.log(res.data.obj)
					if (res.data.obj == 3) {
						this.mypercent = 10
						clearInterval(this.time)
						var that = this
						setTimeout(function() {
							that.status = 1
						}, 800)
					}
				}).catch(err => {
			
				})
			},
			timOut() {
				var that = this
				this.time = setInterval(function() {
					that.mypercent++
					if (that.mypercent == 2 || that.mypercent == 5 || that.mypercent == 8) {
						that.getStatus()
					}
					if (that.mypercent == 10) {
						clearInterval(that.time)
						that.status = 2
					}
				}, 1000)
			}
		}
	}
</script>

<style lang="scss">
	.page{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: #FFFFFF;
	}
	.image{
		text-align: center;
		padding-top: 200rpx;
		image{
		width: 80rpx;
		height: 80rpx;
		margin: 0 auto;
		}
	}
	.text{
		text-align: center;
	}
	.btns{
		margin-top: 50rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		.btn{
			width: 200rpx;
			height: 60rpx;
			border: 1px solid #FD5900;
			color: #FD5900;
			line-height: 60rpx;
			border-radius: 20rpx;
			text-align: center;
		}
	}
	
	.content {
		padding-top: 200rpx;
		text-align: center;
	    width: 80%;
		margin: 0 auto;
		.contentBox {
		
	
			image {
				width: 100rpx;
				height: 100rpx;
			}
	
			.images {
				width: 230rpx;
				height: 230rpx;
			}
	
			.tipText {
				margin-top: 20rpx;
				font-size: 25rpx;
				color: #949494;
				margin-bottom: 20rpx;
			}
	
			.jinmdutiao {
				margin-top: 20rpx;
				padding: 0 50rpx;
			}
	
			.btns {
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
	
				.btn1 {
					width: 200rpx;
					height: 60rpx;
					border: 1px solid #FD5900;
					color: #FD5900;
					line-height: 60rpx;
					border-radius: 20rpx;
					text-align: center;
					
				}
				.btn2 {
					width: 200rpx;
					height: 60rpx;
					border: 1px solid #FD5900;
					color: #FD5900;
					line-height: 60rpx;
					border-radius: 20rpx;
					text-align: center;
					margin-right: 50rpx;
				}
			}
		}
	}
</style>
